<template>
	<view class="uni_box home">
		<navbar title='悬赏主服务协议'>
		</navbar>
		<view class="content">
			<view class="viplist" @click="fabu(1)">
				<image class="vipone" src="/static/img/vipone.png"></image>
				<view class="vipitem">
					<text class="faname">发布悬赏</text>
					<view class="faview">
						<text class="lifa">立即发布</text>
						<image class="vipnext" src="/static/img/vipnext.png"></image>
					</view>
				</view>
			</view>
			<view class="viplist" @click="fabu(2)">
				<image class="vipone" src="/static/img/viptwo.png"></image>
				<view class="vipitem">
					<text class="faname">发布名片</text>
					<view class="faview">
						<text class="lifa">立即发布</text>
						<image class="vipnext" src="/static/img/vipnext.png"></image>
					</view>
				</view>
			</view>
			<view class="viplist" @click="fabu(3)">
				<image class="vipone" src="/static/img/vipthree.png"></image>
				<view class="vipitem">
					<text class="faname">发布项目</text>
					<view class="faview">
						<text class="lifa">立即发布</text>
						<image class="vipnext" src="/static/img/vipnext.png"></image>
					</view>
				</view>
			</view>

			<view class="huiquan">
				<text class="huitit">会员等级及权限一览</text>
				<view class="huiitem">
					<view class="huileft">
						<view class="litem">
							有效期
						</view>
						<view class="litem">
							悬赏上限
						</view>
						<view class="litem">
							发布范围
						</view>
						<view class="litem">
							悬赏周期
						</view>
						<view class="litem">
							费用
						</view>
					</view>
					<view class="huiright">
						<view class="rone">
							<view class="roneitem" v-for="(item,index) in viplist" :key="index">{{item.title}}</view>
						</view>
						<view class="rtwo">
							<view class="twitem">
								<view class="rtwoitem" v-for="(item,index) in viplist" :key="index">{{item.day+'天'}}</view>
							</view>
							<view class="twitem">
								<view class="rtwoitem txt" v-for="(item,index) in viplist" :key="index">{{ item.task_count+'个' }}</view>
							</view>
							<view class="twitem">
								<view class="rtwoitem txt" v-for="(item,index) in viplist" :key="index">{{ item.task_range }}</view>
							</view>
							<view class="twitem">
								<view class="rtwoitem" v-for="(item,index) in viplist" :key="index">{{ item.task_day }}</view>
							</view>
							<view class="twitem">
								<view class="rtwoitem" v-for="(item,index) in viplist" :key="index">{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="huiitem" style="margin-top: 20rpx;">
					<view class="huileft"></view>
					<view class="huiright">
						<view class="rone">
							<view class="fabu" @click="getkai">开通</view>
							<view class="fabu" @click="getkai">开通</view>
							<view class="fabu" @click="getkai">开通</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 协议 -->
			<u-parse v-if="content" style="margin: 30rpx 0;" :html="content" :tag-style="style"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				viplist:[]
			}
		},
		onLoad() {
			this.fgetVipList()
			this.getxieyi()
		},
		onShow() {
		},
		methods: {
			
			async getxieyi(){
				let res = await this.$u.api.getContent({
					code:'vipxieyi'
				});
				// this.title = res.title
				this.content = res.content
			},
			async fgetVipList(){
				let res = await this.$u.api.getVipList({
				});
				this.viplist = res
			},
			fabu(e){
				if(e == 1){
					this.navrouter("/pages_subject/twoPage/FabuXS");
				}else if(e == 2){
					this.navrouter("/pages_subject/twoPage/FabuMP");
				}else if(e == 3){
					this.navrouter("/pages_subject/twoPage/FabuRW");
				}
			},
			getkai(){
				uni.navigateBack()
				// this.navrouter("/pages_subject/twoPage/VIpServices");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.content{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
		padding-bottom: 100rpx;
		.viplist{
			position: relative;
			width: 100%;
			height: 190rpx;
			margin-bottom: 20rpx;
			.vipone{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.vipitem{
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				padding: 30rpx 40rpx;
				flex-direction: column;
				.faname{
					font-weight: 800;
					font-size: 50rpx;
					color: #FFFFFF;
					display: block;
				}
				.faview{
					padding: 10rpx 0rpx;
					border-radius: 50rpx;
					margin-top: 6rpx;
					border: 1rpx solid #FFFFFF;
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 181rpx;
					justify-content: center;
					.lifa{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.vipnext{
						margin-left: 6rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		.huiquan{
			background: linear-gradient(-5deg, #4BB6F0, #1D8DFD);
			border-radius: 20rpx;
			margin: 20rpx 0rpx;
			padding: 30rpx;
			.huitit{
				display: block;
				margin-bottom: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: block;
				text-align: center;
			}
			.huiitem{
				display: flex;
				flex-direction: row;
				.huileft{
					padding-top:54rpx;
					display: flex;
					flex-direction: column;
					width: 20%;
					margin-right: 15rpx;
					.litem{
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						height: 62rpx;
						display: flex;
						align-items: center;
						justify-content: center;

					}
				}
				.huiright{
					display: flex;
					flex-direction: column;
					flex: 1;

				}
				.rone{
					// padding: 13rpx 0;
					height: 60rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.roneitem{
						width: 33.33%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				.fabu{
					// width: 33.33%;
					flex: 1;
					margin: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 15rpx 30rpx;
					border-radius: 5rpx;
					border: 1rpx solid #FFFFFF;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.rtwo{
					background: #FFFFFF;
					border-radius: 18rpx;
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 300rpx;
					.twitem{
						height: 60rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						border-bottom: 1rpx solid #eee;
						.rtwoitem{
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 22rpx;
							color: #2191FC;
							display: inline-block;
							text-align: center;

						}
					}
					.twitem:last-child{
						border-bottom: none;
					}
				}
			}
		}
	}
	
</style>
